module.exports = {
  deep: true,
  bind: function () {
    console.log(this.el.classList[0] + ' animate bound!')
  },
  update: function (value) {
    let that = this
    let animate = value
    let el = that.el
    let vm = that.vm
    el.style.opacity = '0'
    // console.log('vm' + vm)
    // console.log('value->' + animate.value)
    vm.$on('toogle_animate', function (curIndex) {
      let curPage = 0
      if (el.getAttribute('data-id') != null) {
        // fullpage animation
        curPage = +el.getAttribute('data-id')
      } else {
        // section animation
        curPage = +el.parentNode.getAttribute('data-id')
      }

      console.log('------------animate debug-------------')
      console.log('curClass -> ' + el.classList[0])
      console.log('curIndex -> ' + curIndex)
      console.log('curPage -> ' + curPage)
      console.log('--------------debug end---------------')
      if (curIndex === curPage) {
        let delay = animate.delay || 0
        console.log('animation play ->' + el.classList[0] + ' delay -> ' + delay)
        el.classList.add('animated')
        setTimeout(() => {
          el.style.opacity = '1'
          el.classList.add(animate.value)
        }, delay)
      } else {
        console.log('animation remove ->' + el.classList[0])
        el.style.opacity = '0'
        if (el.getAttribute('class').indexOf('animated') > -1) {
          el.classList.remove(animate.value)
        }
      }
    })
  }
}
